import ReactDOM from 'react-dom'

const arr = [
  { id: 1, name: 'Vue' },
  { id: 2, name: 'React' },
  { id: 3, name: 'Angular' },
  { id: 4, name: 'xxx' },
]

/* const ele = (
  <div>
    <ul>
      <li>{arr[0].name}</li>
      <li>{arr[1].name}</li>
      <li>{arr[2].name}</li>
    </ul>
  </div>
) */

/* const tempJSX = [
  <li>{arr[0].name}</li>,
  <li>{arr[1].name}</li>,
  <li>{arr[2].name}</li>,
]
const ele = (
  <div>
    <ul>{tempJSX}</ul>
  </div>
) */

// 简化代码
/* const tempJSX = [
  <li>{arr[0].name}</li>,
  <li>{arr[1].name}</li>,
  <li>{arr[2].name}</li>,
] */
// 可以使用 map 返回一组 JSX，最后统一渲染

// 注意点
// key 加哪里：循环谁，加到谁上面
// key 要唯一，最好不要用索引
// key 作用：性能（React 内部进行虚拟 DOM Diff 的时候为了快速找到变化的那个虚拟 DOM）
// 既然是内部用的，所以不会渲染
/* const tempJSX = arr.map((item) => (
  <li key={item.id}>
    <span>{item.name}</span>
  </li>
)) */
const tempJSX = arr.map((item) => {
  return (
    <li key={item.id}>
      <span>{item.name}</span>
    </li>
  )
})
const ele = (
  <div>
    <ul>{tempJSX}</ul>
  </div>
)

// 渲染谁、渲染到哪里
ReactDOM.render(ele, document.querySelector('#root'))
